<template>
   <!-- <button @click="openMask">打开遮罩层</button> -->


     <!-- <button @click="closeMask" class="close-button" ><el-icon :size="size" :color="color">
      <CloseBold />
    </el-icon></button> -->
    <div class="login-form" v-if="flag">

    <h2 class="login-title">欢迎登录</h2>
    <el-form :model="loginForm" ref="loginFormRef" :rules="rules">
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
          prefix-icon="User"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          prefix-icon="Lock"
          show-password
        />
      </el-form-item>
      <el-form-item prop="code">
        <div class="captcha-container">
          <el-input
            v-model="loginForm.code"
            placeholder="请输入验证码"
            prefix-icon="Key"
          />
          <img
            :src="captchaUrl"
            @click="refreshCaptcha"
            alt="验证码"
            class="captcha-img"
          >
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-button"
          :loading="loading"
          @click="handleSubmit"
        >
          {{ loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form-item>
    </el-form>

  </div>
  <RegisterModal v-model="flag" v-else> </RegisterModal>
  <div class="register-section" v-if="flag" >
      <span class="register-text">还没有账号？</span>
      <el-button
        type="text"
        class="register-link"
        @click="handleRegister"
      >
        立即注册
      </el-button>
    </div>
    <div class="register-section" v-else>
      <span class="register-text">已有账号？</span>
      <el-button
        type="text"
        class="register-link"
        @click="handleLogin"
      >
        返回登陆页
      </el-button>
    </div>
   






</template>

<script setup>

import { ref , onMounted ,defineModel} from 'vue';
import RegisterModal from './RegisterModal.vue';
import {captcha,login,getUserInfo} from '@/api/auth'
import { useUserStore } from '@/stores/user';
const useStore = useUserStore()
const loginVisible = defineModel()
console.log(loginVisible.value);

const loading = ref(false)
const flag = ref(true)
const loginForm = ref({
  username: '',
  password: '',
  code: '',
  uuid: ''
})
const rules =ref(
  {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
      ]

  }

)
 const handleRegister =()=>{
 flag.value = !flag.value

 }
 const handleLogin =()=>{
 flag.value = !flag.value

 }

 const getCaptcha = async () => {
  //  const res = await captcha()
  // console.log(res+'6');
  const res = await captcha()
  console.log(res);
  if (res.data.code === 200) {
      captchaUrl.value = 'data:image/gif;base64,' + res.data.img
      loginForm.value.uuid = res.data.uuid
    }

 }

 const captchaUrl = ref('')


// 刷新验证码
const refreshCaptcha = () => {
      getCaptcha()
    }

 onMounted(() => {
      getCaptcha()
    })


//登录1.校验2.发请求
const loginFormRef = ref(null)
const handleSubmit = async () => {
  await loginFormRef.value.validate()
  loading.value = true
  try {
    const res = await login(loginForm.value)
    if (res.data.code === 200) {
      useStore.getToken(res.data.token)
      // 获取用户信息
      const userInfoRes = await getUserInfo()
      if(userInfoRes.data.code === 200) {
        // 添加userName字段映射
        const userInfo = {
          userName: userInfoRes.data.data.userName || userInfoRes.data.data.username, // 兼容后端可能的字段名
          name: userInfoRes.data.data.name,
          sex: userInfoRes.data.data.sex,
          studentNumber: userInfoRes.data.data.studentNumber,
          phonenumber: userInfoRes.data.data.phonenumber,
          major: userInfoRes.data.data.major,
          classroom: userInfoRes.data.data.classroom
        }
        useStore.setUserInfo(userInfo)
      }
      loginVisible.value = false
      ElMessage.success('登录成功')
    }
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败,请重试')
  } finally {
    loading.value = false
  }
}
</script>


<style scoped>
.login-form {
  padding: 30px;

}

.login-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
}

.captcha-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.captcha-img {
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
}

.login-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

:deep(.el-form-item__error) {
  color: #f56c6c;
}

.register-section {
  text-align: center;
  margin-top: 16px;
  color: #666;
}

.register-text {
  font-size: 14px;
  margin-right: 4px;
}

.register-link {
  font-size: 14px;
  padding: 0 4px;
}

:deep(.register-link.el-button) {
  font-weight: 600;
}

.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  text-align: center;
}
.close-button {
  position: absolute;
  top: 30px;
  right: 30px;

}
</style>
